<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>SUI</title>
	<meta name="viewport" content="initial-scale=1, maximum-scale=1">
	<link rel="shortcut icon" href="/favicon.ico">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">

	<link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm.min.css">
	<link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm-extend.min.css">

</head>
<body>
	<!-- page集合的容器，里面放多个平行的.page，其他.page作为内联页面由路由控制展示 -->
	<div class="page-group">
		<!-- 单个page ,第一个.page默认被展示-->
		<div class="page page-current" id="home">
			<!-- 标题栏 -->
			<header class="bar bar-nav">
				<a class="icon icon-me pull-left open-panel"></a>
				<h1 class="title">标题</h1>
			</header>

			<!-- 工具栏 -->
			<nav class="bar bar-tab">
				<a class="tab-item external active" href="#home">
					<span class="icon icon-home"></span>
					<span class="tab-label">首页</span>
				</a>
				<a class="tab-item external" href="#collect">
					<span class="icon icon-star"></span>
					<span class="tab-label">收藏</span>
				</a>
				<a class="tab-item external" href="#">
					<span class="icon icon-settings"></span>
					<span class="tab-label">设置</span>
				</a>
			</nav>

			<!-- 这里是页面内容区 -->
			<div class="content">
				<!-- 按钮组 -->
				<div class="content-block">
					<div class="content">
						<div class="content-block">
							<p class="buttons-row"><a href="#" class="button">Button 1</a><a href="#" class="button">Button 2</a><a href="#" class="button">Button 3</a></p>
							<p class="buttons-row"><a href="#" class="button active">Button 1</a><a href="#" class="button">Button 2</a><a href="#" class="button">Button 3</a></p>
							<p class="buttons-row"><a href="#" class="button">Button 1</a><a href="#" class="button active">Button 2</a><a href="#" class="button">Button 3</a></p>
							<p class="buttons-row"><a href="#" class="button button-round">Button 1</a><a href="#" class="button button-round">Button 2</a></p>
							<p class="buttons-row"><a href="#" class="button button-round">Button 1</a><a href="#" class="button button-round active">Button 2</a></p>
						</div>
					</div>
				</div>
				<!-- 填充按钮 -->
				<div class="content-block">
					<p><a href="#" class="button button-fill">Fill Button </a></p>
					<p><a href="#" class="button button-fill button-success">Fill Button </a></p>
					<p><a href="#" class="button button-fill button-danger">Fill Button </a></p>
					<p><a href="#" class="button button-fill button-warning">Fill Button </a></p>
				</div>
			</div>
		</div>

		<!-- 其他的单个page内联页（如果有） -->
		<div class="page" id="collect">
			<!-- 标题栏 -->
			<header class="bar bar-nav">
				<a class="icon icon-me pull-left open-panel"></a>
				<h1 class="title">标题</h1>
			</header>

			<!-- 工具栏 -->
			<nav class="bar bar-tab">
				<a class="tab-item external " href="#home">
					<span class="icon icon-home"></span>
					<span class="tab-label">首页</span>
				</a>
				<a class="tab-item external active" href="#collect">
					<span class="icon icon-star"></span>
					<span class="tab-label">收藏</span>
				</a>
				<a class="tab-item external" href="#">
					<span class="icon icon-settings"></span>
					<span class="tab-label">设置</span>
				</a>
			</nav>

			<!-- 这里是页面内容区 -->
			<div class="content">
				<div class="content-block">这里是  收藏 content
					<div class="content-block">
						<p><a href="#" class="button button-fill open-panel" data-panel='#panel-left-demo'>打开左侧栏</a></p>
						<p><a href="#" class="button button-fill open-panel" data-panel='#panel-right-demo'>打开右侧栏</a></p>
					</div>
				</div>
			</div>
		</div>
	</div>

	<!-- popup, panel 等放在这里 -->
	<div class="panel-overlay"></div>
	<!-- 左边侧边栏 -->
	<div class="panel panel-left panel-reveal theme-dark" id='panel-left-demo'>
		<div class="content-block">
			<p>这是一个侧栏</p>
			<p>你可以在这里放用户设置页面</p>
			<p><a href="#" class="close-panel">关闭</a></p>
		</div>
		<div class="list-block">
			<!-- .... -->
		</div>
	</div>
	<!-- 右边侧边栏 -->
	<div class="panel panel-right panel-reveal" id='panel-right-demo'>
		<div class="content-block">
			<p>这是一个侧栏</p>
			<!-- Click on link with "close-panel" class will close panel -->
			<p><a href="#" class="close-panel">关闭</a></p>
		</div>
	</div>



	<script type='text/javascript' src='//g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script>
	<script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/sm.min.js' charset='utf-8'></script>
	<script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/sm-extend.min.js' charset='utf-8'></script>

	<!-- 默认必须要执行$.init(),实际业务里一般不会在HTML文档里执行，通常是在业务页面代码的最后执行 -->
	<script>$.init()</script>
</body>
</html>